<template>
  <el-container>
    <el-aside width="200px">
      <div style="height:50px;margin:20px">
        <el-avatar icon="el-icon-user-solid"></el-avatar>
      </div>
      <el-divider></el-divider>
      <div>
        <div style="font-weight:bolder;">你好{{this.$GLOBAL.username}},欢迎回来!</div>
        <el-divider></el-divider>
        <div style="margin:20px;font-size: 16px;color: #2fb9d4;">今天是 {{new Date().toLocaleDateString()}}</div>
      </div>
      <el-divider></el-divider>
      <div>
        <div style="text-align:left;margin:10px;font-size:20px">您有：</div>
        <div style="margin:20px;font-size:18px">待出行机票<span style="color:blue;margin:0 5px">
            {{ticketSorts.onWaiting}}</span>张</div>
        <div style="margin:20px;font-size:18px">待选座机票<span style="color:red;margin:0 5px">
            {{ticketSorts.onChecking}}</span>张</div>
      </div>
    </el-aside>
    <el-main>
      <el-tabs v-model="activeName">
        <el-tab-pane label="我的订单" name="all-ticket"></el-tab-pane>
        <el-tab-pane label="未出行订单" name="due-ticket"></el-tab-pane>
        <!-- 将列表和标签名绑定起来 -->
        <user-flight-list v-bind:a="activeName" v-on:sort-ticket="getTicketSorts"></user-flight-list>
      </el-tabs>
    </el-main>
  </el-container>
</template>
<script>
import UserFlightList from "../components/UserTicketsList.vue";
export default {
  components: { UserFlightList },
  name: "user",
  data() {
    return {
      activeName: "due-ticket",
      ticketSorts: {
        onWaiting: 0,
        onChecking: 0
      }
    };
  },
  methods: {
    getTicketSorts(item) {
      this.ticketSorts = item;
    }
  }
};
</script>
<style>
.el-divider {
  background-color: #999;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  height: 1080px;
}
.el-container {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 100%;
}

body > .el-container {
  margin-bottom: 40px;
}
</style>